<template>
  <view
      id="headerBar"
      class="header-bar-container"
      :style="{
          position: props.isFixed ? 'fixed' : 'static',
          left:0,
          top:0
        }"
  >
    <wd-navbar
        :safeAreaInsetTop="true"
        :bordered="false"
        :custom-style="`background: ${props.navBarBgc};`"
    >
      <template #left v-if="props.isShowBackIcon">
        <wd-icon name="thin-arrow-left" :color="props.titleColor" size="18px" @click="pageBack(currentPageNumber)"></wd-icon>
      </template>
      <template #title>
        <view
            class="nav-title"
            :style="{color:props.titleColor}"
        >{{ props.title }}
        </view>
      </template>
    </wd-navbar>
  </view>
</template>

<script setup>
  import {onLoad} from "@dcloudio/uni-app";
  import {ref,getCurrentInstance,onMounted} from "vue";
  import {useMixin} from "@/hook/useMixin";


  const instance = getCurrentInstance();
  const {pageBack} = useMixin();
  const props = defineProps({
    title: {
      default: "",
      type: String
    },
    titleColor: {
      default: "#000000",
      type: String
    },
    navBarBgc: {
      default: "linear-gradient(180deg, rgba(169,195,175,1) 0%, rgba(194,211,190,1) 31%, rgba(237,240,223,1) 100%)",
      type: String
    },
    isFixed: {
      default: false,
      type: Boolean
    },
    isShowBackIcon: {
      default: true,
      type: Boolean
    }
  });
  const emits = defineEmits(["getHeaderBarHeight"]);

  const currentPageNumber = ref(1);

  onLoad(() => {
    currentPageNumber.value = getCurrentPages().length;
    let res = getCurrentPages()[getCurrentPages().length - 1];
  });
  onMounted(() => {
    let query = uni.createSelectorQuery().in(instance.proxy);
    query.select("#headerBar").boundingClientRect((data) => {
      let {height} = data;
      emits("getHeaderBarHeight",{height:height});
    }).exec();
  });
</script>

<style lang="scss" scoped>
.header-bar-container {
  width: 100vw;
  z-index: 999 !important;

  .nav-title {
    font-weight: normal;
    font-size: 32rpx;
  }
}
</style>
